<template>
	<view class="order-index">
		<u-sticky style="background-color: blue;">
			<u-collapse
				class="white-bg"
			  >
			    <u-collapse-item
			      title="高级搜索"
			      name="search"
				  :clickable="false"
			    >
					<u-icon name="search" size="50"  slot="icon"></u-icon>
					<view class="search-wrap">
						<view class="search-item">
							<view class="label">跟进提醒</view>
							<view class="input-box">
								<uni-data-select
								  v-model="filter.processon_ignore_days"
								  :localdata="processonDays"
								  @change="processonDayChange"
								></uni-data-select>
							</view>
						</view>
						
						<view class="search-item">
							<view class="label">客户姓名</view>
							<view class="input-box">
								<uni-easyinput type="text" v-model="filter.full_name" :inputBorder="true" maxlength="20" placeholder="请输入客户姓名"></uni-easyinput>
							</view>
						</view>
						<view class="search-item">
							<view class="label">客户手机</view>
							<view class="input-box">
								<uni-easyinput type="number" v-model="filter.mobile" :inputBorder="true" maxlength="11" placeholder="请输入客户手机"></uni-easyinput>
							</view>
						</view>
						<view class="search-item">
							<view class="label">亲属手机</view>
							<view class="input-box">
								<uni-easyinput type="number" v-model="filter.mate_mobile" :inputBorder="true" maxlength="11" placeholder="请输入亲属手机"></uni-easyinput>
							</view>
						</view>
						<view class="search-item">
							<view class="label">注册日期</view>
							<view class="input-box">
								<picker mode="date" :value="filter.register_date" @change="confirmRegisterDate">
									<view class="flex">
										<view class="uni-input">
											<view>{{filter.register_date || '请点击选择日期 '}}</view>
										</view>
									</view>
								</picker>
							</view>
						</view>
						<view class="search-item">
							<view class="label">出游喜好</view>
							<view class="input-box">
								<uni-easyinput type="text" v-model="filter.tour_perfer" :inputBorder="true" maxlength="40" placeholder="请输入客户出游喜好"></uni-easyinput>
							</view>
						</view>
						<view class="search-item">
							<view class="label">意向景点</view>
							<view class="input-box">
								<uni-easyinput type="text" v-model="filter.tour_target" :inputBorder="true" maxlength="40" placeholder="请输入客户意向景点"></uni-easyinput>
							</view>
						</view>
						<view class="search-item">
							<view class="label">累计消费</view>
							<view class="input-box flex">
								<u-number-box class="amt-input" v-model="filter.sum_amt_s" :min="0" :inputWidth="220" bgColor="#f8f8f8" :showMinus="false" :showPlus="false"></u-number-box>
								<view class="sep">至</view>
								<u-number-box class="amt-input" v-model="filter.sum_amt_e" :min="0" :inputWidth="220" bgColor="#f8f8f8" :showMinus="false" :showPlus="false"></u-number-box>
							</view>
						</view>
						
						<view class="search-item">
							<view class="label"></view>
							<view class="search-footer input-box flex">
								<view class="search">
									<u-button size="small" type="primary" text="搜索" @click="searchCustomer()"></u-button>
								</view>
							</view>
						</view>
					</view>
				</u-collapse-item>
			</u-collapse>
		</u-sticky>
		<view class="order-list">
			<u-empty
			    mode="list"
				:iconSize="100"
			    icon="list"
				:show="!customersList.length"
				:marginTop="100"
				:textSize="30"
			>
			</u-empty>
			
			<view class="top-tools flex">
				<view class="top-tool" @click="addCustomer()">添加客户</view>
			</view>
			<view class="order-item" v-for="(item,key) in customersList" :key="key">
				<view class="order-item__info flex">
					<view class="title">客户姓名</view>
					<view class="value">
						<view class="flex" style="align-items: center;">
							<text :class="[item.is_idcheck==1?'text-green':'text-red','is-idcheck']">{{ item.is_idcheck ==1 ? item.full_name : item.nickname}}</text>
							<view class="add-idcard" @click="addIdcard({uid: item.uid, full_name: item.full_name})" v-if="item.is_idcheck==0">添加身份证</view>
						</view>
					</view>
				</view>
				<view class="order-item__info flex" v-if="item.is_idcheck==1 && item.idcard.idnumber">
					<view class="title">身份证号</view>
					<view class="value">
						<view class="flex" style="align-items: center;">
							<text :class="['text-green','is-idcheck']">{{ item.idcard.idnumber }}</text>
							<view class="add-idcard" @click="addIdcard(item.idcard)">修改</view>
						</view>
						
						
					</view>
				</view>
				<view class="order-item__info flex">
					<view class="title">客户手机</view>
					<view class="value">{{ item.mobile }}</view>
				</view>
				<view class="order-item__info flex">
					<view class="title">亲属手机</view>
					<view class="value">{{ item.mate_mobile || '-' }}</view>
				</view>
				<view class="order-item__info flex">
					<view class="title">亲属手机</view>
					<view class="value">{{ item.mate_mobile2 || '-' }}</view>
				</view>
				<view class="order-item__info flex">
					<view class="title">客户地址</view>
					<view class="value">
						<template v-if="item.address.length > 0">
							<view v-for="add in item.address">{{ add.province }}{{ add.city }}{{ add.area }} {{ add.details }}</view>
						</template>
						<template v-else>无地址</template>
					</view>
				</view>
				<view class="order-item__info flex">
					<view class="title">客户生日</view>
					<view class="value" @click="modCusBirthday(item , key)">
						<picker mode="date" :value="item.birthday" @change="confirmBirthday">
							<view class="flex">
								<view class="uni-input">{{item.birthday}}</view>
								<view class="opt flex" style="margin-left: 10rpx;">修改</view>
							</view>
						</picker>
					</view>
				</view>
				<view class="order-item__info flex">
					<view class="title">客户来源</view>
					<view class="value">{{ item.cus_from || '-' }}</view>
				</view>
				<view class="order-item__info flex">
					<view class="title">出游喜好</view>
					<view class="value">{{ item.tour_perfer || '-' }}</view>
				</view>
				<view class="order-item__info flex">
					<view class="title">意向景点</view>
					<view class="value">{{ item.tour_target || '-' }}</view>
				</view>
				<view class="order-item__info flex">
					<view class="title">去过哪里</view>
					<view class="value">{{ item.wheregone || '-' }}</view>
				</view>
				<view class="order-item__info flex">
					<view class="title">累计消费</view>
					<view class="value flex">
						<view class="flex price-item">
							<text class="price">{{ item.order_total_amt || 0 }}</text>
							<text class="unit">元</text>
						</view>
					</view>
				</view>
				<view class="order-item__info flex">
					<view class="title">注册日期</view>
					<view class="value">
						<u-text :size="32" :text="item.register_date"></u-text>
					</view>
				</view>
				<view class="order-item__info flex">
					<view class="title">最后登录</view>
					<view class="value">
						<u-text :size="32" :text="item.last_time_display"></u-text>
					</view>
				</view>
				<view class="order-item__info flex">
					<view class="title">备注信息</view>
					<view class="value">{{ item.remark || '无' }}</view>
				</view>
				<view class="order-item__info flex">
					<view class="title">跟进状态</view>
					<view class="value">
						<u-text :size="28" color="red" v-if="item.processon_ignore_days > 0" :text="item.processon_ignore_text"></u-text>
						<u-text :size="28" color="#4cd964" v-else :text="item.processon_ignore_text"></u-text>
					</view>
				</view>
				<view class="order-item__info flex">
					<view class="title">可选操作</view>
					<view class="value flex">
						<view class="can-opt-item">
							<u-text text="电联" margin="0 14rpx 0 0" prefixIcon="phone-fill" :iconStyle="{fontSize:'26rpx',color:'#f9ae3d'}" color="#f9ae3d" :size="28" @click="phone('13611593654')"></u-text>	
						</view>
						<view class="can-opt-item">
							<u-text text="标注" margin="0 14rpx 0 0" prefixIcon="file-text-fill" :iconStyle="{fontSize:'26rpx',color:'#398ade'}" color="#398ade" :size="28"  @click="remark(item)"></u-text>
						</view>
						<view class="can-opt-item">
							<u-text text="订单" margin="0 14rpx 0 0" prefixIcon="bag-fill" :iconStyle="{fontSize:'26rpx',color:'#dd524d'}" color="#dd524d" :size="28"  @click="orders(item)"></u-text>
						</view>
						<view class="can-opt-item">
							<u-text text="跟进" margin="0 14rpx 0 0" prefixIcon="twitter" :iconStyle="{fontSize:'26rpx',color:'#176218'}" color="#176218" :size="28"  @click="processon(item)"></u-text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<u-loadmore :status="loadStatus" fontSize="32" :iconSize="32" line />
		
		<!-- 标注 -->
		<u-modal :show="cusRemark" title="添加标注" showCancelButton confirmColor="#ff5a5f" @confirm="submitRemark()" @cancel="cusRemark=false">
			<view class="slot-content">
				<u-form labelPosition="left" :model="remarkForm" labelWidth="140" ref="uForm">
					<u-form-item label="手机号码" prop="remarkForm.mobile" borderBottom>
						<view class="text-area-box">
							<u-textarea v-model="remarkForm.mobile" placeholder="请填写客户手机号码" :height="80" autoHeight count></u-textarea>
						</view>
					</u-form-item>
					<u-form-item label="亲属号码" prop="remarkForm.mate_mobile" borderBottom>
						<view class="text-area-box">
							<u-textarea v-model="remarkForm.mate_mobile" placeholder="请填写客户亲属号码" :height="80" autoHeight count></u-textarea>
						</view>
					</u-form-item>
					<u-form-item label="亲属号码" prop="remarkForm.mate_mobile2" borderBottom>
						<view class="text-area-box">
							<u-textarea v-model="remarkForm.mate_mobile2" placeholder="请填写客户亲属号码" :height="80" autoHeight count></u-textarea>
						</view>
					</u-form-item>
					<u-form-item label="出游偏好" prop="remarkForm.tour_perfer" borderBottom>
						<view class="text-area-box">
							<u-textarea v-model="remarkForm.tour_perfer" placeholder="请填写客户出游偏好" :height="80" autoHeight count></u-textarea>
						</view>
					</u-form-item>
					
					<u-form-item label="意向景点" prop="remarkForm.tour_target" borderBottom>
						<view class="text-area-box">
							<u-textarea v-model="remarkForm.tour_target" placeholder="请填写客户意向景点" :height="80" autoHeight count></u-textarea>
						</view>
					</u-form-item>
					
					<u-form-item label="客户来源" prop="remarkForm.cus_from" borderBottom>
						<view class="text-area-box">
							<u-textarea v-model="remarkForm.cus_from" placeholder="请填写客户客户来源" :height="80" autoHeight count></u-textarea>
						</view>
					</u-form-item>
					
					<u-form-item label="去过哪里" prop="remarkForm.wheregone" borderBottom>
						<view class="text-area-box">
							<u-textarea v-model="remarkForm.wheregone" placeholder="请填写客户去过哪里" :height="80" autoHeight count></u-textarea>
						</view>
					</u-form-item>
					
					<u-form-item label="备注信息" prop="remarkForm.remark" borderBottom>
						<view class="text-area-box">
							<u-textarea v-model="remarkForm.remark" placeholder="请填写客户备注信息" :height="80" autoHeight count></u-textarea>
						</view>
					</u-form-item>
				</u-form>
			</view>
		</u-modal>
		
		<!-- 添加客户 -->
		<u-modal :show="cusAdd" title="添加客户" showCancelButton confirmColor="#ff5a5f" @confirm="submitCusAdd()" @cancel="cusAdd=false">
			<view class="slot-content">
				<u-form labelPosition="left" :model="cusAddForm" labelWidth="140" ref="uForm">
					<u-form-item label="客户姓名" prop="cusAddForm.full_name" borderBottom>
						<view class="text-area-box">
							<uni-easyinput  v-model="cusAddForm.full_name" placeholder="请填写客户姓名" />
						</view>
					</u-form-item>
					
					<u-form-item label="身份证号" prop="cusAddForm.idnumber" borderBottom>
						<view class="text-area-box">
							<uni-easyinput  v-model="cusAddForm.idnumber" placeholder="请填写身份证号" />
						</view>
					</u-form-item>
					
					<u-form-item label="客户手机" prop="cusAddForm.mobile" borderBottom>
						<view class="text-area-box">
							<uni-easyinput  v-model="cusAddForm.mobile" placeholder="请填写客户手机" />
						</view>
					</u-form-item>
					
					<u-form-item label="亲属手机" prop="cusAddForm.mate_mobile" borderBottom>
						<view class="text-area-box">
							<uni-easyinput  v-model="cusAddForm.mate_mobile" placeholder="请填写亲属手机" />
						</view>
					</u-form-item>
					
					<u-form-item label="亲属手机" prop="cusAddForm.mate_mobile2" borderBottom>
						<view class="text-area-box">
							<uni-easyinput  v-model="cusAddForm.mate_mobile2" placeholder="请填写亲属手机" />
						</view>
					</u-form-item>
					
					<u-form-item label="出游偏好" prop="cusAddForm.tour_perfer" borderBottom>
						<view class="text-area-box">
							<u-textarea v-model="cusAddForm.tour_perfer" placeholder="请填写客户出游偏好" :height="80" autoHeight count></u-textarea>
						</view>
					</u-form-item>
					
					<u-form-item label="意向景点" prop="cusAddForm.tour_target" borderBottom>
						<view class="text-area-box">
							<u-textarea v-model="cusAddForm.tour_target" placeholder="请填写客户意向景点" :height="80" autoHeight count></u-textarea>
						</view>
					</u-form-item>
					
					<u-form-item label="客户来源" prop="cusAddForm.cus_from" borderBottom>
						<view class="text-area-box">
							<u-textarea v-model="cusAddForm.cus_from" placeholder="请填写客户客户来源" :height="80" autoHeight count></u-textarea>
						</view>
					</u-form-item>
					
					<u-form-item label="去过哪里" prop="cusAddForm.wheregone" borderBottom>
						<view class="text-area-box">
							<u-textarea v-model="cusAddForm.wheregone" placeholder="请填写客户去过哪里" :height="80" autoHeight count></u-textarea>
						</view>
					</u-form-item>
					
					<u-form-item label="备注信息" prop="cusAddForm.remark" borderBottom>
						<view class="text-area-box">
							<u-textarea v-model="cusAddForm.remark" placeholder="请填写客户备注信息" :height="80" autoHeight count></u-textarea>
						</view>
					</u-form-item>
				</u-form>
			</view>
		</u-modal>
		
		<!-- 添加/修改身份证 -->
		<u-modal :show="idcardFlag" title="添加/修改身份证" showCancelButton confirmColor="#ff5a5f" @confirm="submitIdcardAdd()" @cancel="idcardFlag=false">
			<view class="slot-content">
				<u-form labelPosition="left" :model="idcardForm" labelWidth="140" ref="uForm">
					<u-form-item label="真实姓名" prop="idcardForm.realname" borderBottom>
						<view class="text-area-box">
							<uni-easyinput  v-model="idcardForm.realname" placeholder="请填写客户真实姓名" />
						</view>
					</u-form-item>
					
					<u-form-item label="身份证号" prop="idcardForm.idnumber" borderBottom>
						<view class="text-area-box">
							<uni-easyinput  v-model="idcardForm.idnumber" placeholder="请填写身份证号" />
						</view>
					</u-form-item>
					
					<u-form-item label="身份证地址" prop="idcardForm.address">
						<view class="text-area-box">
							<uni-easyinput  v-model="idcardForm.address" placeholder="请填写身份证地址" />
						</view>
					</u-form-item>
				</u-form>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import { customerList,customerInfoSave,customerAddSave,customerIdnumberSave } from '@/api/api.js'
	export default {
		data() {
			return {
				loadStatus: 'loadmore',
				filter: {
					full_name: '',
					mobile: '',
					mate_mobile: '',
					register_date: '',
					tour_perfer: '',
					tour_target: '',
					sum_amt_s: 0,
					sum_amt_e: 0,
					processon_ignore_days: '',
					page: 1
				},
				customersList: [],
				cusRemark: false,
				remarkForm: {
					uid: 0,
					mobile: '',
					mate_mobile: '',
					mate_mobile2: '',
					tour_perfer: '',
					cus_from: '',
					wheregone: '',
					tour_target: '',
					remark: ''
				},
				cusUid: 0,
				cusUIndex: 0,
				processonDays: [
					{text: '超过7天未跟进', value: 7},
					{text: '超过15天未跟进', value: 15}, 
					{text: '超过30天未跟进', value: 30},
				],
				cusAdd: false,
				cusAddForm: {
					uid: 0,
					full_name: '',
					idnumber: '',
					mobile: '',
					mate_mobile: '',
					mate_mobile2: '',
					tour_perfer: '',
					cus_from: '',
					wheregone: '',
					tour_target: '',
					remark: ''
				},
				idcardForm: {
					uid: 0,
					realname: '',
					idnumber: '',
					address: ''
				},
				idcardFlag: false
			}
		},
		methods:{
			searchCustomer() {
				this.initPage()
				this.getCustomers()
			}
			,getCustomers() {
				if ( this.loadStatus == 'nomore' ) {
					return console.log('nomore')
				}
				
				uni.showLoading({
					title: '加载中'
				})
				this.loadStatus = 'loading'
				customerList(uni.$lv.object.queryParams(this.filter)).then(res => {
					uni.hideLoading()
					let _result = res.data || []
					if ( !_result.length ) {
						return this.loadStatus = 'nomore'
					}
					this.customersList = uni.$lv.array.union(this.customersList , _result)
					this.loadStatus = 'loadmore'
				})
			}
			,phone(mobile) {
				uni.makePhoneCall({
					phoneNumber: mobile
				});
			}
			,orders(customer) {
				return uni.navigateTo({
					url: `/pagesA/pages/sales/orders?customerUid=${customer.uid}`
				})
			}
			,remark(customer) {
				this.remarkForm.uid = customer.uid || 0
				this.remarkForm.mobile = customer.mobile || ''
				this.remarkForm.mate_mobile = customer.mate_mobile || ''
				this.remarkForm.mate_mobile2 = customer.mate_mobile2 || ''
				this.remarkForm.tour_perfer = customer.tour_perfer || ''
				this.remarkForm.tour_target = customer.tour_target || ''
				this.remarkForm.cus_from = customer.cus_from || ''
				this.remarkForm.wheregone = customer.wheregone || ''
				this.remarkForm.remark = customer.remark || ''
				this.cusRemark = true
			}
			,submitRemark() {
				uni.showLoading({
					title: '提交中'
				})
				customerInfoSave(this.remarkForm).then(res => {
					uni.showToast({
						title: '标注成功'
					})
					this.cusRemark = false
				})
			}
			,initPage() {
				this.loadStatus = 'loadmore'
				this.filter.page = 1
				this.customersList = []
			}
			,modCusBirthday(user , usersIndex) {
				this.cusUid = user.uid || 0
				this.cusUIndex = usersIndex
			}
			,confirmBirthday(e) {
				uni.showLoading({
					title: '提交中'
				})
				
				let _form = {
					uid: this.cusUid,
					birthday: e.detail.value
				}
				
				customerInfoSave(_form).then(res => {
					uni.showToast({
						title: '修改成功'
					})
					this.customersList[this.cusUIndex].birthday = res.data.birthday
				})
			}
			,confirmRegisterDate(e) {
				this.filter.register_date = e.detail.value
			}
			,processon(customer) {
				return uni.navigateTo({
					url: `/pagesA/pages/sales/processon?customerUid=${customer.uid}`
				})
			}
			,processonDayChange(evt) {
				this.searchCustomer()
			}
			,addCustomer() {
				this.cusAdd = true
				this.cusAddForm = {
					uid: 0,
					full_name: '',
					idnumber: '',
					mobile: '',
					mate_mobile: '',
					mate_mobile2: '',
					tour_perfer: '',
					cus_from: '',
					wheregone: '',
					tour_target: '',
					remark: ''
				}
			}
			,submitCusAdd() {
				if ( !this.cusAddForm.full_name ) {
					return uni.showToast({
						title: '客户姓名必填',
						icon: 'none'
					})
				}
				
				if ( !this.cusAddForm.mobile ) {
					return uni.showToast({
						title: '客户手机号必填',
						icon: 'none'
					})
				}
				
				uni.showLoading({
					title: '提交中'
				})
				customerAddSave(this.cusAddForm).then(res => {
					uni.showToast({
						title: '添加成功'
					})
					this.cusAdd = false
					this.searchCustomer()
				})
			}
			,addIdcard(idcard) {
				this.idcardForm.uid = idcard.uid || 0
				this.idcardForm.realname = idcard.realname || idcard.full_name
				this.idcardForm.idnumber = idcard.idnumber || ''
				this.idcardForm.address = idcard.address || ''
				this.idcardFlag = true
			}
			,submitIdcardAdd() {
				if ( !this.idcardForm.realname ) {
					return uni.showToast({
						title: '客户姓名必填',
						icon: 'none'
					})
				}
				
				if ( !this.idcardForm.idnumber ) {
					return uni.showToast({
						title: '客户身份证号必填',
						icon: 'none'
					})
				}
				
				uni.showLoading({
					title: '提交中'
				})
				customerIdnumberSave(this.idcardForm).then(res => {
					uni.showToast({
						title: '添加成功'
					})
					this.idcardFlag = false
					this.searchCustomer()
				})
			}
		},
		mounted() {
			this.getCustomers()
		},
		/**
		 * 下拉刷新回调函数
		 */
		onPullDownRefresh() {
			this.initPage()
			this.getCustomers()
			uni.stopPullDownRefresh()
		},
		/**
		 * 上拉加载回调函数
		 */
		onReachBottom() {
			this.filter.page++
			this.getCustomers()
		},
		watch: {
			
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: $uni-bg-color-grey!important;
	}
	.add-idcard {
		font-size: 22rpx;
		color: $uni-bg-color-light;
		margin-left: 20rpx;
	}
	.order-index {
		.text-area-box {
			width: 360rpx;
		}
		.top-tools {
			justify-content: flex-end;
			margin-bottom: 20rpx;
			.top-tool {
				font-size: 25rpx;
			}
		}
		padding-bottom: 30rpx;
		.search-wrap {
			background-color: #FFFFFF;
			.search-item {
				@include flex;
				align-items: center;
				.label {
					width: 140rpx;
					color: $u-main-color;
					font-size: 26rpx;
				}
				.input-box {
					flex: 1;
					.amt-input {
						flex: 1;
					}
					.sep {
						font-size: 26rpx;
						color: #999;
						width: 100rpx;
						text-align: center;
					}
				}
				margin-bottom: 20rpx;
			}
			.search-footer {
				margin-top: 30rpx;
				justify-content: end;
				.search {
					width: 160rpx;
				}
			}
		}
		.order-list {
			padding: 30rpx;
			.order-item {
				padding: 30rpx;
				background-color: #FFFFFF;
				border-radius: 20rpx;
				&__info {
					.title{
						font-size: 28rpx;
						margin-right: 20rpx;
						color: #909399;
						width: 130rpx;
						@include flex;
						align-items: center;
					}
					.value {
						font-size: 30rpx;
						color: $u-main-color;
						flex: 1;
						.is-idcheck {
							font-size: 24rpx;
						}
						.text-green {
							color: $uni-color-success
						}
						.text-red {
							color: $uni-color-error
						}
						.can-opt-item {
							@include flex;
							align-items: center;
						}
					}
					.opt {
						color: rgb(57, 138, 222);
						font-size: 24rpx;
						align-items: center;
					}
				}
				&__info:not(:last-child){margin-bottom: 20rpx;}
			}
			.order-item:not(:last-child){margin-bottom: 40rpx;}
		}
	}
</style>
